<template>
  <view class="container">
    <view class="list">
      <view v-for="item in data" :key="item.id" class="list-item">
        <view class="item-header" @click="toggleExpand(item.id)">
          <view class="item-title">
            <text class="header-title">车间名称：{{ item.workshopName }}</text>
            <text style="color: #666666;">批次号：{{ item.productionBatch }}</text>
			<text style="color: #666666;">方案状态：<text :style="{ color: getColor1(item.status) }">{{getMaterialStatus(item.status)}}</text> </text>
			<text style="color: #666666;">出入库状态：<text :style="{ color: getColor2(item.inout_status) }">{{getinoutStatus(item.inout_status)}}</text> </text>
          </view>
        </view>

        <view v-if="item.expanded" class="item-details">
          <view class="detail-card" v-for="child in item.detailList" :key="child.detailsId" @click="getDetail(child.detailsId)">
            <text class="title">类型名称：{{ child.typeName }}</text><br/>
            <text class="content-text">产品名称：{{child.materialName}}  </text><br/>
			<text class="content-text">方案合格率：{{child.passRate}}%</text><br/>
            <text class="content-text">检验样本量：{{ child.quantity }}{{child.unitName}}</text><br/>
            <text class="content-text">操作员：{{ child.nickName }}</text><br/>
            <text class="content-text">检验时间：{{ child.inspectionDate }}</text><br/>
			<button @click.stop="getStandard(child.typeId)">查看指标</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      data: [],
	  id: undefined
    };
  },
  created() {
	this.id= uni.getStorageSync('userIdInfo').userId;
    this.getData();
  },
  methods: {
    getData() {
      uni.request({
        url: 'http://127.0.0.1:1101/MesQualityInspectionPlan/findList',
        method: 'GET',
		data:{
			workerId: this.id
		},
        success: (res) => {
          if (res.data.code === 200 && Array.isArray(res.data.data)) {
            this.data = res.data.data.map(item => ({
              ...item,
              expanded: false
            }));
          } else {
            console.error('Unexpected data format:', res.data);
          }
        },
        fail: (err) => {
          console.error('Error fetching data:', err);
        }
      });
    },
    getMaterialStatus(status) {
      switch (status) {
        case 1:
          return '待确认';
        case 2:
          return '执行中';
        case 3:
          return '已完成';
        default:
          return '未知状态';
      }
    },
	getColor1(status) {
      // 根据状态返回对应的颜色
      switch (status) {
        case 1:
          return '#71C671';
        case 2:
          return '#00BFFF';
        case 3:
          return '#FF0000';
        default:
          return '#8E8E8E';
      }
    },
    getinoutStatus(inoutStatus) {
      switch (inoutStatus) {
        case 0:
          return '入库';
        case 1:
          return '出库';
        default:
          return '未知状态';
      }
    },
	getColor2(status) {
	  // 根据状态返回对应的颜色
	  switch (status) {
	    case 0:
	      return '#71C671';
	    case 1:
	      return '#00BFFF';
	    default:
	      return '#8E8E8E';
	  }
	},
    toggleExpand(id) {
      this.data = this.data.map(item => ({
        ...item,
        expanded: item.id === id ? !item.expanded : item.expanded
      }));
    },
	getDetail(id){	
		uni.navigateTo({
			url:'/pages/productQualityPlan/addDetails?id='+id
		})
	},
	getStandard(id){
		uni.navigateTo({
			url:'/pages/productQualityStandard/index?id='+id
		})
	}
  },
};
</script>

<style>
page {
  background: #f9f9f9;
}

.container {
  padding: 32rpx;
}

.list {
  margin-top: 32rpx;
}

.list-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.1); /* 增强列表项阴影效果*/
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.list-item:hover {
  transform: translateY(-5rpx);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  cursor: pointer;
  transition: background-color 0.3s;
}

.item-header:hover {
  background-color: #f0f6ff;
}

.item-title {
  display: flex;
  flex-direction: column;
   line-height: 30px;
}

.item-details {
  padding: 16rpx;
  background-color: #f8f9fc;
  animation: fadeIn 0.3s ease-in-out;
}

.detail-card {
  background: #ffffff;
  border-radius: 8rpx;
  padding: 16rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  line-height: 25px;
}

.detail-card:hover {
  transform: scale(1.02);
}

.content-text {
  font-size: 14px;
  color: #666;
  line-height: 16px;
}

.header-title{
  font-size: 18px;
  font-weight: bold;
  line-height: 40px;
}

.title{
  font-size: 16px;
  font-weight: bold;
   line-height: 30px;
}

</style>
